<template>
    <div class="status">
        <van-nav-bar title="支付结果" :fixed="true" :placeholder="true" @click-left="$router.push('/home')" />

        <van-empty description="支付成功！！">
            <div class="msg-box">
                <div>购买课程：《{{info.name}}》</div>
                <div>订单金额：￥{{info.price}}元</div>
                <div>下单时间：{{dayjs(info.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                <div>付款人：{{order.user && order.user.username}}</div>
                <div>订单号：{{order.no}}</div>
            </div>
            <van-button round class="bottom-button" @click="toPage(1)">查看订单</van-button>
            <van-button round type="primary" class="bottom-button" @click="toPage(2)">观看视频</van-button>
        </van-empty>
        <van-button type="danger" block round class="home-btn" @click="toPage(3)">返回首页</van-button>
    </div>
</template>
<script>
  import { alipayTradePrecreate, alipayTradeWapPay, alipayTradeQuery } from '@/api/common.js'
  import { orderAdd,orderAll } from '@/api/order.js'
  import { details, list} from '@/api/course.js'
  import dayjs from 'dayjs'

  export default {
    data() {
      return {
        info: {},
        order: {},
      }
    },
    created(){
      //this.$Title('打开失败')
      this.userId = this.$store.getters.userId
      this.courseId = Number(this.$route.query.courseId)
      this.no = Number(this.$route.query.no)
      this.fetchDetails()
      if (this.$route.query.no) {
        this.fetchOrderDetailByOrderId()
      }
    },
    methods: {
      toPage(type) {
        switch (type) {
          case 1:
            this.$router.push('/about');
            break;
          case 2:
            this.$router.push(`/videoDetails?courseId=${this.courseId}&no=${this.no}`);
            break;
          case 3:
            this.$router.push('/home');
            break;
          default:
            this.$router.push('/home');
            break;
        }
      },
      async getTradeQuery(no) {
        const res = await alipayTradeQuery(no);
        if (res.code === 200) {
          // this.$toast.success('支付成功~');
          this.isBuy = true;
          this.handleOrder(this.courseId)
          // this.fetchOrderDetailByOrderId()
        }
      },
      async handleOrder(id){
        await orderAdd({courseId:id,userId:Number(this.$store.getters.userId), no: this.no}).then(res => {
          if (res.code == 200) {
            this.$toast.success('支付成功~');
            window.location.reload()
            // this.fetchOrderDetailByOrderId()
            // this.$router.push(`/status?courseId=${id}&no=${this.no}`)
            setTimeout(()=>{
              this.$toast.clear()
              /*this.$router.push({
                path:'/videoDetails?courseId='+id
              })*/
              this.order = res.data
            },1500)
          } else {
            this.$notify(res.message)
          }
        })
      },
      async fetchOrderDetailByOrderId() {
        if (this.courseId && this.userId) {
          const res = await orderAll({courseId: this.courseId, userId: this.userId})
          if (res.data && res.data.length > 0) {
            this.$toast.success('订单已支付~');
            this.order = res.data[0]
            setTimeout(()=>{
              this.$toast.clear()
              /*this.$router.push({
                path:'/videoDetails?courseId='+id
              })*/
            },1500)
          } else {
            this.getTradeQuery({no: this.$route.query.no});
          }
        }
      },
      async fetchDetails(){
        await details({id:this.courseId}).then(res => {
          if (res.code == 200) {
            this.info= res.data
            this.info.price = Number(Number(res.data.price).toFixed(2));
            // this.info.price = Number(res.data.price);
            this.fetchOrderList()
          } else {
            this.$notify(res.message)
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .status {
        background-color: white;
        margin: 10px;
        box-shadow: 0 0 10px grey;
        border-radius: 8px;
        height: 90vh;
        .msg-box {
            margin: 0 10px 30px;
            font-size: 16px;
            box-shadow: 0 0 10px grey;
            border-radius: 8px;
            padding: 10px;
            line-height: 33px;
        }
        .van-empty {
            padding-top: 0;
        }
    .bottom-button {
        width: 160px;
        height: 40px;
    }
        .home-btn {
            width: 80%;
            margin: 0 auto;
        }
    }
</style>
